<template>
    <div class="box">
        <el-card>
            <template #header>
                <div class="login-title">
                    <h3>商家登录</h3>
                    <el-link @click="$router.push('/empLogin')">管理员登录</el-link>
                </div>
            </template>
            <el-form ref="refForm" label-width="100px" :model="businessData" :rules="rules">
                <el-form-item label="商家账号" prop="account">
                    <el-input v-model="businessData.account"></el-input>
                </el-form-item>
                <el-form-item label="商家密码" prop="password">
                    <el-input v-model="businessData.password" type="password"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-space :size="30">
                        <el-button @click="login" type="primary">登录</el-button>
                        <el-button @click="resetForm" type="danger">重置</el-button>
                        <el-link @click="$router.push('/businessRegist')">没账号，去注册</el-link>
                    </el-space>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
import axios from "axios";
import qs from "qs";
export default {
    data() {
        return {
            businessData: {},
            rules: {
                account: { required: true, message: "账号不能为空", trigger: "blur" },
                password: [
                    { required: true, message: "密码不能为空", trigger: "blur" },
                    { min: 6, max: 12, message: "长度必须6~12位", trigger: "blur" },
                ],
            },
        };
    },
    methods: {
        login() {
            this.$refs.refForm.validate((valid) => {
                if (valid) {
                    // 发送ajax
                    axios
                        .post(
                            "http://127.0.0.1:8080/javaweb_ele/businessLogin",
                            qs.stringify(this.businessData)
                        )
                        .then((resp) => {
                            // 登录成功之后
                            if (resp.data == 0) {
                                ElNotification({
                                    type: "error",
                                    message: "账号或密码为空",
                                });
                            } else if (resp.data == 1) {
                                ElNotification({
                                    type: "error",
                                    message: "账号或密码错误",
                                });
                            } else {
                                // 表示登录成功
                                ElNotification({
                                    type: "success",
                                    message: "登录成功",
                                });
                                // 需要将商家的信息存放到本地存储中
                                localStorage.setItem("loginInfo", JSON.stringify(resp.data));
                                // 跳转到首页
                                this.$router.push("/home");
                            }
                        });
                }
            })
        },
        resetForm() {
            this.$refs.refForm.resetFields();
        },
    },
};
</script>

<style scoped>
.box {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(https://images.pexels.com/photos/1108117/pexels-photo-1108117.jpeg?auto=compress&cs=tinysrgb&w=800);
    background-size: cover;
    /* 背景图片覆盖整个容器 */
    background-position: center;
    /* 背景图片居中显示 */
    background-repeat: no-repeat;
}

.el-card {
    width: 500px;
    opacity: 0.85;
}
.login-title{
  display: flex;
  justify-content: space-between;
}
</style>